import React, { useState } from 'react';
import { Tabs, Card, Rate, Button, Tag } from 'antd';
import { Link, useNavigate } from 'react-router-dom';
import { RightOutlined } from '@ant-design/icons';
import '../styles/Movies.css';

const { TabPane } = Tabs;

const Movies = () => {
  const [activeTab, setActiveTab] = useState('now_playing');
  const navigate = useNavigate();

  // 模拟电影数据
  const nowPlayingMovies = [
    {
      id: 1,
      title: '哪吒之魔童闯海',
      rating: 9.7,
      imageUrl: 'https://upload.bbtnews.com.cn/2024/1210/1733797517786.jpeg',
      is3D: true,
      isIMAX: true
    },
    {
      id: 2,
      title: '流浪地球2',
      rating: 8.5,
      imageUrl: 'https://n.sinaimg.cn/sinakd20230123s/706/w1906h2800/20230123/9137-b383634783de89cde4d98c83c618be19.jpg'
    },
    {
      id: 3,
      title: '铃芽之旅',
      rating: 8.8,
      imageUrl: 'https://www.artwun.com/public/uploads/images/20230321/1_2023032115041674acf.jpeg'
    }
  ];

  const comingMovies = [
    {
      id: 4,
      title: '唐探1900',
      rating: 9.3,
      imageUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.81733ecd7cd8036aba77f3d22dfc0378?rik=lGCNZI5Ni2N6iA&riu=http%3a%2f%2fk.sinaimg.cn%2fn%2fsinakd20120%2f227%2fw1080h1547%2f20250101%2f54f0-5f9684df363c0512f044bac357bb1b89.jpg%2fw700d1q75cms.jpg&ehk=530kfmcR7H7ekNNzQo1j4SNLbm45ovMsJz%2fXRfC9uK8%3d&risl=&pid=ImgRaw&r=0',
      isIMAX: true,
      releaseDate: '2024-02-10'
    }
  ];

  // 模拟热门影院数据
  const hotCinemas = [
    {
      id: 1,
      name: '宁波民光影城',
      address: '海曙区开明街333号（大一广场）',
      minPrice: 35
    },
    {
      id: 2,
      name: '万达影城（余姚万达广场店）',
      address: '余姚市四明西路878号万达商业广场娱乐楼',
      minPrice: 38
    }
  ];

  const MovieCard = ({ movie }) => (
    <Card
      hoverable
      className="movie-card"
      cover={
        <div className="movie-poster">
          <img alt={movie.title} src={movie.imageUrl} />
          {(movie.is3D || movie.isIMAX) && (
            <div className="movie-format-tags">
              {movie.isIMAX && <Tag color="#1890ff">IMAX</Tag>}
              {movie.is3D && <Tag color="#52c41a">3D</Tag>}
            </div>
          )}
        </div>
      }
    >
      <Card.Meta
        title={movie.title}
        description={
          <div className="movie-info">
            {activeTab === 'now_playing' ? (
              <>
                <Rate disabled defaultValue={movie.rating / 2} allowHalf />
                <span className="movie-rating">{movie.rating}</span>
              </>
            ) : (
              <div className="release-date">上映时间：{movie.releaseDate}</div>
            )}
          </div>
        }
      />
      <Button type="primary" className="buy-ticket-btn">
        {activeTab === 'now_playing' ? '选座购票' : '预售'}
      </Button>
    </Card>
  );

  const CinemaItem = ({ cinema }) => (
    <div className="cinema-item">
      <div className="cinema-info">
        <h4 className="cinema-name">{cinema.name}</h4>
        <p className="cinema-address">{cinema.address}</p>
      </div>
      <div className="cinema-price">
        <span className="price-label">¥</span>
        <span className="price-value">{cinema.minPrice}</span>
        <span className="price-text">起</span>
      </div>
    </div>
  );

  return (
    <div className="movies-container">
      <div className="movies-layout">
        <div className="movies-content">
          <Tabs
            activeKey={activeTab}
            onChange={setActiveTab}
            className="movie-tabs"
          >
            <TabPane tab="正在热映" key="now_playing">
              <div className="movie-grid">
                {nowPlayingMovies.map(movie => (
                  <MovieCard key={movie.id} movie={movie} />
                ))}
              </div>
            </TabPane>
            <TabPane tab="即将上映" key="coming_soon">
              <div className="movie-grid">
                {comingMovies.map(movie => (
                  <MovieCard key={movie.id} movie={movie} />
                ))}
              </div>
            </TabPane>
          </Tabs>
        </div>
        <div className="sidebar">
          <div className="hot-cinemas">
            <div className="section-header">
              <h3>热门影院</h3>
              <Link to="/cinemas" className="view-all">
                查看全部 <RightOutlined />
              </Link>
            </div>
            <div className="cinema-list">
              {hotCinemas.map(cinema => (
                <CinemaItem key={cinema.id} cinema={cinema} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Movies; 